<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ hourseInfo.title }} - 详情页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">

    <!-- Bootstrap Css -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/static/css/app.min.css" rel="stylesheet" type="text/css">

</head>
<body data-topbar="colored">

<!-- Begin page -->
<div id="layout-wrapper">

    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                        <span class="logo-sm">
                            <img src="/static/picture/logo-sm-dark.png" alt="" height="22">
                        </span>
                        <span class="logo-lg">
                            <img src="/static/picture/logo-dark.png" alt="" height="20">
                        </span>
                    </a>

                    <a href="" class="logo logo-light">
                        <span class="logo-sm">
                            <img src="/static/picture/logo-sm-light.png" alt="" height="22">
                        </span>
                        <span class="logo-lg">
                            <img src="/static/picture/logo-light.png" alt="" height="20">
                        </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="楼盘搜索...">
                        <span onclick="toSearch()" class="mdi mdi-magnify"></span>
                        <script>
                            const toSearch = () => {
                                window.location.href = 'http://localhost:5000/page/search'
                            }
                        </script>
                    </div>
                </form>
            </div>

            <div class="d-flex">
                <div class="dropdown d-inline-block">
                    <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle header-profile-user" src="/static/picture/avatar-1.jpg"
                             alt="Header Avatar">
                        <span class="d-none d-sm-inline-block ml-1">{{ username }}</span>
                        <i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="/user/logOut">
                            <i class="mdi mdi-logout font-size-16 align-middle mr-1"></i>
                            退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">
        <div data-simplebar="" class="h-100">
            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">首页菜单</li>
                    <li>
                        <a href="/page/home" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/search" class=" waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>搜索分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/table" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-comment-message"></i></div>
                            <span>数据操作</span>
                        </a>
                    </li>

                    <li class="menu-title">数据可视化</li>
                    <li>
                        <a href="/page/hoursePriceChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>房屋价格分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseDetailChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-layer-group"></i></div>
                            <span>房屋详情分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseTypeChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-object-ungroup"></i></div>
                            <span>房屋类型分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/hourseOtherChar" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-table"></i></div>
                            <span>房屋其他分析</span>
                        </a>
                    </li>

                    <li class="menu-title">词云图</li>
                    <li>
                        <a href="/page/companyWordCloud" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>公司词云图</span>
                        </a>
                    </li>
                    <li>
                        <a href="/page/tagsWordCloud" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-layer-group"></i></div>
                            <span>标签词云图</span>
                        </a>
                    </li>

                    <li class="menu-title">人工智能</li>
                    <li>
                        <a href="/page/pricePrediction" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-box"></i></div>
                            <span>房价预测</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">{{ hourseInfo.title }}</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">首页菜单</a></li>
                                <li class="breadcrumb-item active">{{ hourseInfo.title }} - 详情页</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card mb-0">
                                <div class="card-body">
                                    <h4 style="font-size: 16px;">{{ hourseInfo.title }}</h4>
                                    <p>{{ hourseInfo.city }} / {{ hourseInfo.region }} / {{ hourseInfo.address }}</p>
                                    <p>
                                        {% for room in hourseInfo.rooms_desc %}
                                            {{ room }}室 /
                                        {% endfor %}

                                    </p>
                                    <p>建面: {{ hourseInfo.area_range[0] }}-{{ hourseInfo.area_range[0] }}㎡</p>
                                    <p>
                                        {% for tag in hourseInfo.tags %}
                                            <span style="display: inline-block; height: 30px; margin-right: 10px; padding: 0 12px; line-height: 30px; font-size: 12px; color: #849aae; background: rgba(132, 154, 174, .1);">
                                                {{ tag }}
                                            </span>
                                        {% endfor %}
                                    </p>
                                    <hr>
                                    <p>
                                        <img style="width: 30%;" src="{{ hourseInfo.cover }}" alt="">
                                    </p>
                                </div>
                            </div>
                            <!-- end card -->
                        </div>
                    </div>
                    <!-- end row -->
                </div>
                <!-- end container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
        <!-- End Page-content -->

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        2024 © 沐锦
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-right d-none d-sm-block">
                            Copyright &copy; 2024.<a target="_blank" href="#">链家网-房屋数据分析预测系统</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->
</div>
<!-- END layout-wrapper -->


<!-- JAVASCRIPT -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/metisMenu.min.js"></script>
<script src="/static/js/simplebar.min.js"></script>
<script src="/static/js/waves.min.js"></script>
<script src="/static/js/bundle.js"></script>
<script src="/static/js/app.js"></script>
</body>
</html>